<!-- 修改个人信息 -->
<template>
  <view class="container fs28" :style="{ height: screenHeight + 'px' }">
    <view class="headBox">
      <view class="personalHead-box flex-sp-between flex-display flex-items" @click="userHeadTap">
        <label>头像</label>
        <image class="user-headImg" v-if="item.headImage" :src="item.headImage"></image>
        <image class="user-headImg" v-else :src="`${VUE_APP_STATIC_URL}ui-static/img/user/morentouxiang.png`"> </image>
      </view>
    </view>
    <view class="personalBack-box flex-items-plus flex-column">
      <view class="personalHead-box flex-sp-between flex-display flex-items">
        <label>昵称</label>
        <!--				<label class="font-color-999" v-if="item.name">{{item.name}}</label>-->
        <!--        <label class="font-color-999" v-else>{{item.phone}}</label>-->
        <!-- <input class="nameInput" v-if="name" v-model="name" type="text" placeholder="请输入内容" @blur="changeName(1)" /> -->
        <!-- <input class="nameInput" v-else type="text" v-model="phone" placeholder="请输入内容" @blur="changeName(2)" /> -->
        <input class="nameInput" v-model="name" type="text" placeholder="请输入内容" @blur="changeName" />
      </view>
      <view class="personalHead-box flex-sp-between flex-display flex-items" @click="sexShowClick">
        <label>性别</label>
        <label class="font-color-999">{{ item.sex }}</label>
      </view>
      <view class="personalHead-box1 flex-sp-between flex-display flex-items" @click="changeTime">
        <label>生日</label>
        <label class="font-color-999">{{ parsebirthday(birthday) }}</label>
        <!-- <u-calendar v-model="birthdateShow" :mode="mode"></u-calendar> -->
      </view>
    </view>
    <view class="iphoneNumback-box flex-items-plus">
      <view class="iphoneNum-box flex-row-plus flex-sp-between flex-items">
        <label style="width: 50%">手机号</label>
        <label style="color: #ff5000" v-if="phone">{{ phone }}</label>
        <label style="color: #ff5000" v-else>
          <!-- #ifdef MP-ALIPAY -->
          <button class="verifyPhone" open-type="getAuthorize" @getAuthorize="onGetAuthorize" @error="onAuthError" scope="phoneNumber">去验证</button>
          <!-- #endif -->
          <!-- #ifndef MP-ALIPAY -->
          去验证
          <!-- #endif -->
        </label>
      </view>
    </view>
    <view class="agreement">
      <view class="agreement agreement_top" @click="protocol('app_privacy_agreement')">
        <text>用户隐私协议</text>
        <image :src="`${VUE_APP_STATIC_URL}ui-static/img/right.png`" mode=""></image>
      </view>
      <view class="agreement" @click="protocol('app_user_agreement')">
        <text>用户服务协议</text>
        <image :src="`${VUE_APP_STATIC_URL}ui-static/img/right.png`" mode=""></image>
      </view>
    </view>

    <view class="mar-top-100">
      <view class="exitLoginBut flex-items-plus" @click="quit">退出登录 </view>
      <!-- #ifdef APP-PLUS -->
      <view class="cancellation" @click="cancellation">注销账号 </view>
      <!-- #endif -->
    </view>

    <!-- 修改性别弹窗 -->
    <u-select v-model="sexShow" title="修改性别" :list="sexList" @confirm="ConfirmSex"></u-select>
    <!-- 修改生日弹窗 -->
    <u-picker v-model="timeShow" mode="time" title="修改生日" :params="params" start-year="1970" @confirm="ConfirmTime"> </u-picker>
    <!-- <view>
      <u-popup v-model="sexShow" mode="center" close-icon-size ="20" border-radius="10" :closeable='true' close-icon-pos = "top-right">
        <view class="flex-items-plus flex-column">
          <label class="mar-top-50 fs-bold">性别</label>
          <u-radio-group class="sexRadio-box flex-items-plus flex-column" v-model="item.sex" @change="sexRadioGroupChange">
            <u-radio class="sexRadio"
              v-for="(item, index) in sexList" :key="index"
              :name="item.id"
              :disabled="item.disabled"
              active-color="#ff5000"
            >
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </view>
      </u-popup>
    </view> -->

    <u-modal v-model="modalData.show" :content="modalData.content" :title="modalData.title" confirm-color="#ff5000" :confirm-text="modalData.confirmText" :cancel-text="modalData.cancelText" :show-cancel-button="!!modalData.cancelText" @confirm="() => modalData.confirm()" @cancel="modalData.show = false"></u-modal>
  </view>
</template>

<script setup>
import { request } from "@/utils/request";
import API from "@/config/api";
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";

const screenHeight = ref(0);
const birthdateShow = ref(false);
const mode = ref("date");
const birthday = ref("");
const sexShow = ref(false);
const timeShow = ref(false);
const item = ref({});
const code = ref("");
const phone = ref("");
const name = ref("");
const sexList = ref([
  {
    value: "1",
    label: "男",
  },
  {
    value: "2",
    label: "女",
  },
]);
const UpdateInfoQuery = ref({
  headimg: "",
  sex: "",
  nickname: "",
});
const params = ref({
  // 日期
  year: true,
  month: true,
  day: true,
  hour: false,
  minute: false,
  second: false,
});

onLoad(() => {
  GetUser();
});
onMounted(() => {
  // 获取手机的屏幕高度
  uni.getSystemInfo({
    success: res => {
      screenHeight.value = res.screenHeight;
    },
  });
});

// 多商户用户协议
const protocol = type => {
  uni.navigateTo({
    url: "protocol?type=" + type,
  });
};

const modalData = ref({
  show: false,
  title: "温馨提示",
  content: "",
  confirmText: "确定",
  cancelText: "取消",
  confirm: () => null,
});
const cancellation = () => {
  const modalOptions = {
    show: true,
    title: "温馨提示",
    content: "是否注销此账号！",
    confirmText: "前往注销",
    confirm: () => {
      uni.navigateTo({
        url: "unsubscribe",
      });
    },
  };
  modalData.value = modalOptions;
};
// 修改生日
const changeTime = () => {
  if (birthday.value == "1970-01-01" || birthday.value == "") {
    timeShow.value = true;
  }
};
// 修改昵称
const changeName = () => {
  const newName = name.value || phone.value;
  if (!newName) {
    uni.showToast({
      title: "请输入新的内容",
      icon: "none",
    });
    return false;
  }
  // uni.showLoading({
  // 	mask: true,
  // 	title: "正在加载中"
  // })
  request(
    API.UpdateUser,
    {
      name: newName,
    },
    "POST"
  )
    .then(res => {
      GetUser();
      uni.hideLoading();
      uni.showToast({
        title: "修改成功",
        icon: "success",
      });
    })
    .catch(res => {
      uni.hideLoading();
      throw new Error(res);
    });
};
// 提交修改生日
const ConfirmTime = content => {
  if (birthday.value == "1970-01-01" || birthday.value == "") {
    let birthday = content.year + "-" + content.month + "-" + content.day;

    request(
      API.UpdateUser,
      {
        birthday,
      },
      "POST"
    )
      .then(res => {
        GetUser();
        uni.hideLoading();
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
      })
      .catch(res => {
        uni.hideLoading();
        throw new Error(res);
      });
  }
};
// 点击弹窗修改性别
const sexShowClick = () => {
  sexShow.value = true;
};
// 提交修改性别
const ConfirmSex = content => {
  let sex = content[0].label;
  request(
    API.UpdateUser,
    {
      sex,
    },
    "POST"
  )
    .then(res => {
      GetUser();
      uni.hideLoading();
      uni.showToast({
        title: "修改成功",
        icon: "success",
      });
    })
    .catch(res => {
      uni.hideLoading();
      throw new Error(res);
    });
};

// 获取用户信息
const GetUser = () => {
  request(API.GetUser, {}, "GET")
    .then(res => {
      item.value = res.data;
      phone.value = res.data.phone;
      name.value = res.data.name;
      birthday.value = res.data.birthday;
    })
    .catch(res => {
      throw new Error(res);
    });
};

const userHeadTap = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    success: chooseImageRes => {
      uni.showLoading({ title: "上传中" });
      const tempFiles = chooseImageRes.tempFiles;
      uni.uploadFile({
        url: API.UploadUrl,
        filePath: tempFiles[0].path,
        name: "file",
        formData: {
          folderId: "-1",
        },
        // #ifdef MP-ALIPAY
        fileType: "image",
        // #endif
        success: uploadRes => {
          // 判断是否json字符串，将其转为json格式
          const uploadResData = JSON.parse(uploadRes.data);
          console.log("success=", uploadResData);
          if (uploadResData.code == "200") {
            const avatar_url = uploadResData.data.url;
            request(
              API.UpdateUser,
              {
                headImage: avatar_url,
              },
              "POST"
            )
              .then(res => {
                GetUser();
                uni.hideLoading();
                uni.showToast({
                  title: "修改成功",
                  icon: "success",
                });
              })
              .catch(res => {
                uni.hideLoading();
                throw new Error(res);
              });
          } else {
            uni.showToast({
              title: "上传失败,请稍后重试",
              icon: "none",
            });
          }
        },
        fail: err => {
          uni.showLoading({
            title: "请稍后重试",
          });
          console.log("fail=", err);
        },
        complete: res => {
          uni.hideLoading();
          const resData = JSON.parse(res.data);
          console.log("complete=", resData);
        },
      });
    },
  });
};
//生日
const birthdateChange = e => {
  return;
  // item.birth = e.result
};
// 性别
const sexRadioGroupChange = e => {
  return;
};

const quit = () => {
  // uni.showLoading({
  // 	mask: true,
  // 	title: '正在退出...',
  // 	duration: 2000,
  // });
  setTimeout(function () {
    uni.removeStorageSync("storage_key");
    uni.removeStorageSync("distributorId");
    uni.removeStorageSync("allCartNum");
    uni.reLaunch({
      url: "login",
      success() {
        uni.hideLoading();
      },
    });
  }, 1000);
};

const onGetAuthorize = () => {
  // uni.showLoading({
  // 	mask: true,
  // 	title: '验证中...',
  // })
  my.getPhoneNumber({
    success: res => {
      let encryptedData = res.response;
      console.log("encryptedData:", encryptedData);
      request(
        API.UpdateAliPhone,
        {
          phone: encryptedData,
        },
        "POST"
      )
        .then(res => {
          const item = res.data;
          uni.setStorageSync("storage_key", item);
          phone.value = item.phone;
          // uni.hideLoading()
        })
        .finally(res => {});
    },
    fail: res => {
      console.log("getPhoneNumber failed", res);
      uni.hideLoading();
      uni.showToast({
        title: "验证失败",
        icon: "none",
      });
    },
  });
};

const parsebirthday = birthday => {
  return birthday == "" ? "1970-01-01" : birthday;
};
</script>

<style lang="scss">
.agreement {
  width: 710rpx;
  margin: 20rpx auto 0;
  background-color: #fff;

  .agreement_top {
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 32rpx;
      bottom: 0;
      width: 646rpx;
      height: 4rpx;
      background: #f5f7fa;
    }
  }

  .agreement {
    width: 100%;
    height: 108rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    padding: 0 10rpx 0 32rpx;
    box-sizing: border-box;
    position: relative;

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}

.phoneWxBut {
  width: 160rpx;
  height: 60rpx;
  border: 1rpx solid #ff7800;
  border-radius: 44rpx;
  font-size: 28rpx;
  line-height: 60rpx;
}

.container {
  width: 100%;
  background-color: #f7f7f7;
  padding: 20rpx;

  .personalBack-box {
    width: 100%;
    background-color: #ffffff;

    .personalHead-box {
      width: 90%;
      border-bottom: 1upx solid #e5e5e5;
      padding-bottom: 20upx;
      margin-top: 36upx;

      .nameInput {
        text-align: right;
      }
    }

    .personalHead-box1 {
      width: 90%;
      margin-top: 36upx;
      padding-bottom: 20upx;

      .user-headImg {
        width: 120upx;
        height: 112upx;
        border-radius: 50%;
      }
    }
  }

  .iphoneNumback-box {
    width: 100%;
    background-color: #ffffff;
    height: 100upx;
    margin-top: 20upx;

    .iphoneNum-box {
      width: 90%;

      .verifyPhone {
        color: #ff5000;
        font-size: 30upx;
        border: 0;
      }
    }
  }

  .exitLoginBut {
    width: 640rpx;
    height: 78rpx;
    background: linear-gradient(90deg, #ff9000, #ff5000);
    border-radius: 39rpx;
    color: #fff;
    font-size: 28rpx;
    margin: auto;
  }

  .cancellation {
    height: 78rpx;
    margin: 24rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5000;
    font-size: 28rpx;
    background: #ffffff;
    border: 3rpx solid #ff5000;
  }

  .sexRadio-box {
    width: 520upx;
    height: 328upx;

    .sexRadio {
      margin-top: 30upx;
      padding-bottom: 44upx;
    }
  }

  .headBox {
    margin-bottom: 20rpx;
    background: #ffffff;
    padding: 25rpx 0;

    .personalHead-box {
      width: 90%;
      margin: 0 auto;
    }

    .user-headImg {
      width: 120upx;
      height: 112upx;
      border-radius: 50%;
    }
  }
}
</style>
